/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, DeviceEventEmitter,Image,Navigator,ScrollView,TouchableHighlight,NavigatorIOS
} from 'react-native';
import Util from './view/utils';
import Icon from 'react-native-vector-icons/Ionicons';
import  IconFA  from  'react-native-vector-icons/FontAwesome';

import Day1 from './view/day1/day1';
import Day2 from './view/day2/index';
import Day3 from './view/day3/index';
import Day4 from './view/day4/index';
import Day5 from './view/day5/index';
import Day6 from './view/day6/index';
import Day7 from './view/day7/index';

class MainViews  extends Component {
  constructor(props){
    super(props);
    this.state = {
      days:[
        {key:0,title:'A stopwatch',isFA:false,icon:'ios-stopwatch',size:48,color:'#ff856c', component: Day1,hideNav:true},
        {key:1,title:'A weather app',isFA:false,icon:'ios-partly-sunny',size:60,color:'#90bdc1', component: Day2,hideNav:true},
        {key:2,title:'Twitter',isFA:false,icon:'logo-twitter',size:50,color:'#2aa2ef',component: Day3,hideNav:true},
        {key:3,title:'cocoapods',isFA:true,icon:'contao',size:50,color:'#FF9A05',component: Day4,hideNav:false},
        {key:4,title:'find my location',isFA:false,icon:'ios-pin',size:50,color:'#00D204',hideNav:false,component: Day5},
        {key:5,title:'Spotify',isFA:true,icon:'spotify',size:50,color:'#777',hideNav:false,component: Day6,},
        {key:6,title:'Moveablle Circle',isFA:false,icon:'ios-baseball',size:50,color:'#5e2a06',hideNav:true,component: Day7,},
        {key:7,title:'Swipe Left Menu',isFA:true,icon:'google',size:50,color:'#4285f4',hideNav:true},
        {key:8,title:'Twitter Parallax View',isFA:false,icon:'logo-twitter',size:50,color:'#2aa2ef',hideNav:true},
        {key:9,title:'Tumblr Menu',isFA:false,icon:'logo-tumblr',size:50,color:'#37465c',hideNav:true},
        {key:10,title:'OpenGL',isFA:false,icon:'ios-contrast',size:50,color:'#2F3600',hideNav:false},
        {key:11,title:'charts',isFA:false,icon:'ios-stats',size:50,color:'#fd8f9d',hideNav:false},
        {key:12,title:'tweet',isFA:false,icon:'ios-chatboxes',size:50,color:'#83709d',hideNav:true},
        {key:13,title:'tinder',isFA:false,icon:'ios-american-football',size:50,color:'#ff6b6b',hideNav:true},
        {key:14,title:'Time picker',isFA:false,icon:'ios-calendar-outline',size:50,color:'#ec240e',hideNav:false},
        {key:15,title:'Gesture unlock',isFA:false,icon:'ios-unlock',size:50,color:'#32A69B',hideNav:true},
        {key:16,title:'Fuzzy search',isFA:false,icon:'ios-search',size:50,color:'#69B32A',hideNav:false},
        {key:17,title:'Sortable',isFA:false,icon:'ios-move',size:50,color:'#68231A',hideNav:true},
        {key:18,title:'TouchID to unlock',isFA:false,icon:'md-log-in',size:50,color:'#68231A',hideNav:true},
        {key:19,title:'Single page Reminder',isFA:false,icon:'ios-list-box-outline',size:50,color:'#68d746',hideNav:true},
        {key:20,title:'Multi page Reminder',isFA:false,icon:'ios-paper-outline',size:50,color:'#fe952b',hideNav:true},
        {key:21,title:'Google Now',isFA:false,icon:'md-microphone',size:50,color:'#4285f4',hideNav:true},
        {key:22,title:'Local WebView',isFA:true,icon:'safari',size:50,color:'#23bfe7',hideNav:true},
        {key:23,title:'Youtube scrollable tab',isFA:false,icon:'logo-youtube',size:50,color:'#e32524',hideNav:true},
        {key:24,title:'custome in-app browser',isFA:false,icon:'ios-globe-outline',size:50,color:'#00ab6b',hideNav:true},
        {key:25,title:'swipe and switch',isFA:false,icon:'ios-shuffle',size:50,color:'#893D54',hideNav:true},
        {key:26,title:'iMessage Gradient',isFA:false,icon:'ios-chatbubbles',size:50,color:'#248ef5',hideNav:false},
        {key:27,title:'iMessage image picker',isFA:false,icon:'ios-images',size:50,color:'#f5248e',hideNav:true},
        {key:28,title:'iMessage image picker',isFA:false,icon:'ios-list',size:50,color:'#48f52e',hideNav:false},
        {key:29,title:'Push Notifications',isFA:false,icon:'ios-notifications',size:50,color:'#f27405',hideNav:false},
      ]
    }
  }
  componentWillMount(){
    DeviceEventEmitter.addListener(
        'quickActionShortcut',(data)=>{
          switch (data.title){
            case 'Day5':
              this._jumpToDay(4); break;
            case  'Day22':
              this._jumpToDay(21); break;
            case 'Day26':
              this._jumpToDay(25);break;
            case 'Day28':
              this._jumpToDay(27);break;
          }
        });
  }

  _jumpToDay(index){
    const { navigator } = this.props;
    if (navigator){
      navigator.push({
        title: this.state.days[index].title,
        component: this.state.days[index].component,
        navigationBarHidden: this.state.days[index].hideNav,
      });
    }
  }

  render() {
    var onThis = this;
    var boxs = this.state.days.map(function(elem, index) {
      return(
          <TouchableHighlight key={elem.key} style={[styles.touchBox,styles.touchBox1]} underlayColor="#eee" onPress={onThis._jumpToDay.bind(onThis,[index])}>
            <View style={styles.boxContainer}>
              <Text style={styles.boxText}>Day{index+1}</Text>
              {elem.isFA? <IconFA size={elem.size} name={elem.icon} style={[styles.boxIcon,{color:elem.color}]}></IconFA>:
                  <Icon size={elem.size} name={elem.icon} style={[styles.boxIcon,{color:elem.color}]}></Icon>}
            </View>
          </TouchableHighlight>
      );
    })
    return(
        <ScrollView>
          <View style={styles.touchBoxContainer}>
            {boxs}
          </View>
        </ScrollView>
    );
  }
}

class reactday30 extends Component {
  render() {
    let   NavigationBarRouteMapper={
      Title(route, navigator, index, navState) {
        return (
            <View >
              <Text >
                {navigator.title}
              </Text>
            </View>
        );
      }

    }


    return (
        <Navigator
            initialRoute={{name: 'My First Scene', index: 0,component:MainViews,title:'My First Scene',backButtonTitle: 'back',}}
            renderScene={(route, navigator) =>{
             let Component = route.component;
              if(route.component) {
                  //这里有个 { ...route.params }
                  return <Component {...route.params} navigator={navigator} />
              }
            }
          // <MainViews navigator={navigator}/>
        }


        />
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  itemWrapper:{
    backgroundColor: '#f3f3f3'
  },
  touchBox:{
    width: Util.size.width/3-1,
    height:Util.size.width/3,
    backgroundColor:"#fff",
  },
  touchBoxContainer:{
    flexDirection: "row",
    flexWrap:"wrap",
    width: Util.size.width,
    borderTopWidth: Util.pixel,
    borderTopColor:"#ccc",
    borderLeftWidth: Util.pixel,
    borderLeftColor:"#ccc",
    borderRightWidth: Util.pixel,
    borderRightColor:"#ccc",
  },
  touchBox1:{
    borderBottomWidth: Util.pixel,
    borderBottomColor:"#ccc",
    borderRightWidth: Util.pixel,
    borderRightColor:"#ccc",
  },
  touchBox2:{
    borderBottomWidth: Util.pixel,
    borderBottomColor:"#ccc",
  },
  boxContainer:{
    alignItems:"center",
    justifyContent:"center",
    width: Util.size.width/3,
    height:Util.size.width/3,
  },
  boxIcon:{
    position:"relative",
    top:-10
  },
  boxText:{
    position:"absolute",
    bottom:15,
    width:Util.size.width/3,
    textAlign:"center",
    left: 0,
    backgroundColor:"transparent"
  },
  slide: {
    flex: 1,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
  },
  slideText:{
    position:"absolute",
    bottom: 0,
    paddingTop:5,
    paddingBottom:5,
    backgroundColor:"rgba(255,255,255,0.5)",
    width: Util.size.width,
    textAlign:"center",
    fontSize: 12
  },
  image:{
    width: Util.size.width,
    flex: 1,
    alignSelf: 'stretch',
  },
});

AppRegistry.registerComponent('reactday30', () => reactday30);
